<template>
  <div class='goods-list'>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value"
        :options="option"
      />
      <van-dropdown-item
        title="筛选"
        ref="item"
      >
        <van-cell
          center
          title="包邮"
        >
          <template #right-icon>
            <van-switch
              v-model="switch1"
              size="24"
              active-color="#ee0a24"
            />
          </template>
        </van-cell>
        <van-cell
          center
          title="团购"
        >
          <template #right-icon>
            <van-switch
              v-model="switch2"
              size="24"
              active-color="#ee0a24"
            />
          </template>
        </van-cell>
        <div style="padding: 5px 16px;">
          <van-button
            type="danger"
            block
            round
            @click="onConfirm"
          >
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="goodsAll">
      <div class="good">
        <img
          src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
          alt=""
        >
        <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
        <div class="good-price">
          <div class="sale-price">¥9.9</div>
          <div class="origin-price">¥69</div>
        </div>
      </div>
      <div class="good">
        <img
          src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
          alt=""
        >
        <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
        <div class="good-price">
          <div class="sale-price">¥9.9</div>
          <div class="origin-price">¥69</div>
        </div>
      </div>
      <div class="good">
        <img
          src="https://p0.meituan.net/movie/9069faf584d1f926e2fd6a48fce7f712161845.jpg@750w_750h_2e"
          alt=""
        >
        <div class="good-describe">漫威钢铁侠蜘蛛侠健康陶瓷马克杯</div>
        <div class="good-price">
          <div class="sale-price">¥9.9</div>
          <div class="origin-price">¥69</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    value: 0,
    switch1: false,
    switch2: false,
    option: [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 }
    ]
  }),
  methods: {
    onConfirm() {
      this.$refs.item.toggle()
    }
  }
}
</script>
<style lang="scss" scoped>
.goods-list {
  .goodsAll {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    .good {
      width: 180px;
      background: #fff;
      margin-bottom: 20px;
      img {
        width: 180px;
        height: 180px;
        border-radius: 6px 6px 0 0;
      }
      .good-describe {
        height: 37px;
        font-size: 13px;
        margin: 6px;
        overflow: hidden;
        width: 165px;
        margin: 6px;
      }
      .good-price {
        display: flex;
        margin-left: 6px;
        .sale-price {
          font-size: 15px;
          color: #ed3934;
        }
        .origin-price {
          margin-left: 7px;
          font-size: 12px;
          color: #aaa;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
